
<template>
    <div class="contentLayout returnInterview">
        <pathTracking :path='path' />
        <div class="pageContent">
            <p v-if="showCreate" @click="createBtn" class="createBtn"><img src="@/assets/img/button_plus.png" class="iconPlus" />新建话术</p>
            <div class="content_box">
                <div class="searchList">
                    <div class="common-table-title">
                        <div class="common-table-icon"></div>
                        <div class="common-table-fl">查询条件</div>
                    </div>
                    <div style="padding-bottom: 10px;background: #FFF;border-radius: 0 0 8px 8px;">
                        <advancedSearch :option="returnSearchBox" @onSearch="toSearch" ></advancedSearch>
                    </div>
                </div>
                <div class="tableCan">
                    <!--表格头部-->
                    <div class="tableTitle tableTitleBig">
                        <div class="tableIcon"></div>
                        <div class="tableText">回访话术列表</div>
                    </div>
                    <el-row>
                        <tabelcom
                            :total="total"
                            :pageSize="pageSize"
                            :pageNum='pageNum'
                            :pageTotal="pageTotal"
                            :tableData="tableData"
                            @selectedHighlight="selectedHighlight"
                            :columns="tableHeader"
                            @edit="edit"
                            :isShowEdit="isShowEdit"
                            :isShowDel='isShowDel'
                            :isShowSee="isShowSee"
                            @deleteBtn="deleteBtn"
                            @handleSelectionChange="handleSelectionChange"
                            @handleSizeChange="handleSizeChange"
                            @handleCurrentChange="handleCurrentChange"
                            :rightW="rightW"
                            :showEditBtn="showEditBtn"
                            :doDelete="doDelete"
                        />
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import pathTracking from '@/components/common/pathTracking'// 面包屑路径
import advancedSearch from '../../customerManagement/components/pages/advancedSearch' // 搜索列表
import tabelcom from '../components/table'
import datas from './datas.js'
import _axios from '@/tool/http.js'
// 获取按钮权限配置的方法
import operationConfig from '@/utils/btnsPermission'

export default {
    name:'returnInterview',
    components: {
        tabelcom,
        pathTracking,
        advancedSearch
    },
    data(){
        return{
            path: ['CRM', '营销宝典', '回访话术'],
            options:['新注册客户售前回访','二次复购跟进回访','售后客户关怀回访','售后提醒通知回访','活动提醒通知回访','售中提醒通知回访','粉钻预约回访','其他临时回访','客户投诉'],
            returnSearchBox:datas.returnSearchBox,
            isShowDel:true,
            isShowEdit:true,
            isShowSee:false,

            tableData:[],
            tableHeader:datas.tableHeader,
            total:0, //总条数
			pageSize:10, //每页多少条
			pageNum:0,//当前第几页
            pageTotal:0,//总页数
            
            chachedata:{},//保存搜索信息
            rightW:200,

            showEditBtn: false,
            doDelete: false,
            showCreate: false
        }
    },
    methods:{
        toSearch(val){
            //console.log('查询val',val);
            this.pageSize = 10; 
            this.pageNum = 1;
            var options = {
                customerClassify:val[0].value,
                callbackPurpose:val[1].value,
                callbackWay:val[2].value,
                content:val[3].value
            }
            this.chachedata = options;
            this.getReturnInfo(options)
        },
        //编辑
        edit(par){
            this.$router.push({name:'editTalking',query:{id:par.id}})
        },
        createBtn(){
            this.$router.push({name:'createTalking'})
        },
        selectedHighlight (data) {
            // 如果选中则添加高亮样式
            if (this.TableSelectData.indexOf(data.row) > -1) {
                return {
                'background-color': '#FEF6EE'
                }
                return {}
            }
        },
        // 分页
        handleSizeChange (val) { //每页多少条
            this.pageSize = val;
            this.getReturnInfo(this.chachedata);
        },
        handleCurrentChange (val) { //当前第几页
            this.pageNum = val;
            this.getReturnInfo(this.chachedata);
        },
        handleSelectionChange (selection) {
        // 选中的数组
            //this.TableSelectData = selection
        },
        //删除话术
        deleteBtn(par){
            //console.log('删除',par)
            this.$confirm('确定要删除该话术吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteInfo(par)
                // this.$message({
                //     type: 'success',
                //     message: '删除成功!'
                // });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        deleteInfo(par){
            var that = this;
			that.$ajax({
				url:api.crm + '/speechcraftInfo/'+ par.id,
				method:'DELETE',
			}).then((res) => {
                console.log('删除成功',res)
                var data = res.data;
                if(data.status == 200){
                    that.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    that.getReturnInfo({})
                }
            })
        },
        //沟通事由
        getReasons(){
            var arr = [{
                label: '请选择沟通事由',
                value: ''
            }];
            this.options.map(ele => {
                arr = arr.concat({
                    label: ele,
                    value: ele
                })
            })
            this.returnSearchBox.items.map(ele => {
                ele.key === 'dropdown' && (ele.data = arr)
            })
        },
        //获取回访话术列表
        getReturnInfo(parm){
            var that = this;
			that.$ajax({
				url:api.crm + '/speechcraftInfo/list/'+ this.pageSize + '/' + this.pageNum,
				method:'POST',
				data:parm || {},
			}).then((res) => {
                that.tableData=[]
                var data= res.data;
                if(data.status == 200){
                    var tableList = data.result.list;
					that.total = data.result.total;  //全部条数
					that.pageNum = data.result.pageNum; //当前页
					that.pageSize = data.result.pageSize; //每页数量
                    that.pageTotal = data.result.pages;//总页数
                    if(tableList.length > 0){
                        var tdObj = {};
                        tableList.forEach(el => {
                            //console.log('el',el);
                            tdObj = {
                                customerClassify:el.customerClassify,//客户分类
                                callbackDate:el.callbackDate,
                                callbackPurpose:el.callbackPurpose,
                                callbackWay:el.callbackWay,
                                content:el.content,
                                id:el.id
                            }
                            var classify = el.customerClassify;
                            if(classify == 1){
                                tdObj.customerClassify = '已成交'
                            }else{
                                tdObj.customerClassify = '未成交'
                            }
                            var time = el.callbackDate;
                            if(time == 1){
                                tdObj.callbackDate = '3小时内'
                            }else if(time == 2){
                                tdObj.callbackDate = '3天/3周内'  
                            }else{
                                tdObj.callbackDate = '3周/3月内'
                            }
                            var type = el.callbackWay;
                            if(type == 1){
                                tdObj.callbackWay = '电话'
                            }else if(type == 2){
                                tdObj.callbackWay = '微信'
                            }else{
                                tdObj.callbackWay = '短信'
                            }
                            that.tableData.push(tdObj)
                        });
                    }
                }else{
                    that.$message({
                        message: '获取列表数据失败',
                        type: 'warning'
                    });
                }
            }).catch((err) => {
                that.$message({
                    message: err.data.msg,
                    type: 'warning'
                });
            })
        },
        // 按钮权限
        btnsControl() {
            let permission = operationConfig(this.$route);
            this.showEditBtn = false
            this.doDelete = false
            this.showCreate = false
            permission.forEach(ele => {
                if(ele.menu_name === '编辑') {
                    this.showEditBtn = true
                }else if(ele.menu_name === '删除') {
                    this.doDelete = true
                }else if(ele.menu_name === '新建话术') {
                    this.showCreate = true
                }
            })
        }
    },
    created(){
        this.getReturnInfo({}),
        this.getReasons()
        this.btnsControl()
    },
    activated() {
        this.getReturnInfo({})
        this.btnsControl()
    }
}
</script>

<style>
@import '../../customerManagement/components/css/viewCommon.css';
.el-message-box__status.el-icon-warning{
    display: none;
}
.tableBtn button.deleteBtn{
    border:1px #fd5846 solid !important;
    color:#fd5846 !important
}
</style>


<style scoped>
.pageContent{
    padding: 16px;
}
.tableCan{
    background-color: #000;
    margin-top: 14px;
    border-radius: 8px;
    overflow: hidden;
}
.content_box{
    width: 100%;
    box-sizing: border-box;
    background-color: #f3f3f3;
    border-radius: 8px;
    overflow: hidden;
}
.iconPlus{
    width: 12px;
    height: 12px;
    margin-right: 4px
}
.dr-form{
    padding:0 !important;
    margin-top:0 !important
}
.returnInterview .normal-btn-group .create-exl-btn{
    width: 96px !important;
    /* background-color: #7e6b5a !important;
    color: #fff !important */
}
.contentLayout .navContent{
    margin-top:16px
}
.createBtn{
    height: 40px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    background: #7E6B5A;
    color: #FFF;
    text-align: center;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
}

.iconLayout {
    width: 12px;
    height: 12px;
    margin-right: 4px;
}
.tableInfo{
    padding: 0 16px;
    background: #fff;
}

</style>


